<!--
 * @Description: 流程设计器
 * @Author: DHL
 * @Date: 2022-04-18 14:45:52
 * @LastEditors: DHL
 * @LastEditTime: 2022-08-25 13:29:06
-->

<template>
  <div class="tw-bpms-wrapper">
    <splitpanes class="default-theme">
      <pane :size="80">
        <processDesigner
          ref="processDesignerRef"
          :key="`designer-${reloadIndex}`"
          @init-finished="initModeler"
          @save="handleSave"
        ></processDesigner>
      </pane>
      <pane :size="20">
        <processPropertiesPanel
          ref="processPropertiesPanelRef"
          :key="`penal-${reloadIndex}`"
        ></processPropertiesPanel>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Splitpanes, Pane } from 'splitpanes'
  import 'splitpanes/dist/splitpanes.css'
  import processDesigner from './designer/processDesigner.vue'
  import processPropertiesPanel from './penal/propertiesPanel.vue'
  import { log } from '../../../utils/logUtils'
  import { useBpmnStore } from './store/bpmn'
  import { assign } from 'lodash-es'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  /**
   * 重新加载索引
   */
  const reloadIndex = ref(0)

  /**
   * 设计器
   */
  const processDesignerRef = ref()

  /**
   * 属性面板
   */
  const processPropertiesPanelRef = ref()

  const emit = defineEmits(['save'])

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 初始化完成
   */
  function initModeler() {
    const canvas = bpmnStore.bpmnModeler.get('canvas')
    const rootElement = canvas.getRootElement()

    log.primary('Process Id:', rootElement.id)
    log.primary('Process Name:', rootElement.businessObject.name)

    processPropertiesPanelRef.value.initModels()
  }

  /**
   * 初始化
   */
  function handleInit(modelParams: any) {
    processDesignerRef.value.handleInit(modelParams)

    // processDesignerRef.value.createNewDiagram(modelData.editor)
  }

  /**
   * 保存模型
   */
  function handleSave(saveParams: { xml: string }) {
    const canvas = bpmnStore.bpmnModeler.get('canvas')
    const rootElement = canvas.getRootElement()

    emit(
      'save',
      assign(saveParams, {
        key: rootElement.id,
        name: rootElement.businessObject.name
      })
    )
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////

  defineExpose({
    handleInit
  })
</script>

<style scoped lang="scss">
  .tw-bpms-wrapper {
    height: 100%;
  }
</style>
